<template>
  <div class="shop-visual-panel">
    <el-row :gutter="20">
      <el-col :lg="componentLayout.lg.left" :span="24">
        <left-panel @getShop="getFilter" />
      </el-col>
      <el-col :lg="componentLayout.lg.center" :sm="24" :span="24">
        <div style="height: 100vh;overflow: scroll;">
          <sticky :sticky-top="100">
            <el-pagination
              :page-sizes="[20,30,50,100,150,200]"
              class="page-help"
              :page-size="listQuery.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="listQuery.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </sticky>
          <center-shops-panel v-loading="shopLoading" :table-data="shopList.tableData" />
        </div>
      </el-col>
      <el-col :lg="componentLayout.lg.right" :span="24">
        <select-page :rank-query="rankQuery" :rank-data="rankList" @change="updateRank" @updateStatus="updateStatus" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LeftPanel from './LeftPanel'
import CenterShopsPanel from './CenterShopsPanel'
import SelectPage from './SelectPage'
import Sticky from '@/components/Sticky'
import {
  getShop
} from '@/api/visualFilter'

export default {
  name: 'ShopsIndex',
  components: {
    Sticky,
    SelectPage,
    CenterShopsPanel,
    LeftPanel
  },
  data() {
    return {
      // 商品分页
      listQuery: {
        pageSize: 20,
        page: 1,
        total: 0
      },
      filterData: {
        platform_id: '',
        brand_id: '',
        shop: []
      },
      // 排行榜分页
      rankQuery: {
        pageSize: 3
      },
      // 商品列表
      shopList: {
        tableData: [],
        tableHeader: []
      },
      // 排行榜数据
      rankList: [],
      // 是否没数据了
      noMore: false,
      // 页面的动画，lg时大小
      componentLayout: {
        lg: {
          left: 4,
          center: 16,
          right: 4
        }
      },
      shopLoading: false
    }
  },
  computed: {},
  mounted() {
    this.nextData()
  },
  methods: {
    // 更新排行榜
    updateRank(rank) {
      this.rankQuery = rank
      getShop({
        listQuery: this.listQuery,
        rankQuery: this.rankQuery,
        ...this.filterData
      }).then((ret) => {
        if (!ret.data.next) {
          this.noMore = true
          this.shopLoading = false
        }
        this.rankList = ret.data.rank
        this.shopLoading = false
      }).catch(() => {
        this.noMore = true
        this.shopLoading = false
      })
    },
    handleSizeChange(lq) {
      this.listQuery.pageSize = lq
      this.listQuery.page = 1
      this.nextData()
    },
    handleCurrentChange(lq) {
      this.listQuery.page = lq
      this.nextData()
    },
    // 更新右边显示状态
    updateStatus(status) {
      if (!status) {
        this.componentLayout.lg.center = 19
        this.componentLayout.lg.right = 1
      } else {
        this.componentLayout.lg.center = 16
        this.componentLayout.lg.right = 4
      }
    },
    // 加载商品数据
    nextData() {
      this.shopLoading = true
      getShop({
        listQuery: this.listQuery,
        rankQuery: this.rankQuery,
        ...this.filterData
      }).then((ret) => {
        if (!ret.data.next) {
          this.noMore = true
          this.shopLoading = false
        }
        this.shopList.tableData = ret.data.tableData
        this.shopList.tableHeader = ret.data.tableHeader
        this.listQuery = ret.data.listQuery
        this.rankList = ret.data.rank
        this.shopLoading = false
      }).catch(() => {
        this.noMore = true
        this.shopLoading = false
      })
    },
    getFilter(data) {
      this.shopLoading = true
      this.listQuery = {
        pageSize: 20,
        page: 1,
        total: 0
      }
      this.filterData = data
      this.nextData()
    }
  }
}
</script>

<style scoped lang="scss">
  .page-help {
    padding: 5px;
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  .shop-visual-panel {
    height: 80vh;
    padding-top: 10px;
  }

  .shop-scroll {
    overflow: auto;
    max-height: 100%;
    width: 100%;
    border: 1px solid #ddd;
    padding: 0 16px;

    .text-center {
      color: #606266;
      font-size: 14px;
    }
  }
</style>
